<template>
  <div>
    <!-- 在App.vue中，router-view挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { getChannelListAPI } from '@/api'
export default {
  async created () {
    try {
      const res = await getChannelListAPI()
      console.log(res)
    } catch (err) {
      console.log(err)
    }
  }

}
// 这里记录的是项目的实现步骤以及每个需求的目的
/*
实现任何需求:
1. 铺设页面(html+css)
2. 铺设数据(修改数据)
3. 交互功能
4. 调用后台接口
*/

/*
目标: 引入vant组件库, 使用
1. 下载vant组件库 (yarn add vant)
2. 自动按需引入到工程, 需要一个插件 (yarn add babel-plugin-import -D)
3. babel.config.js里, 填入文档上配置(复制) - 重启服务器
4. main.js - 引入vant组件 - 全局注册
5. 任意.vue组件内, 使用van-开头的全局组件
*/

/*
目标：对axios进行二次封装
  封装内容可以有：
    拦截器统一判断http状态码
    拦截器修改请求头/参数格式...
*/

/*
目标: 移动端适配
思路: vant组件库以及我们自己写px单位, 都变成rem
1. html的font-size(单位px), 值(flexible.js)
flexible.js (获取html的宽度 / 10)
2. 找一个基准
参照iphone6机型来还原我们的设计图
375px宽度, 所以iphone6机型下,375/10 -> html的font-size: 37.5px;
3. 把除了html以外子标签们, (px单位换成rem单位)
例如: 我在iphone6设计图上(1:1), 量出宽度200的图片
设置img标签的宽度为200px / 37.5
(1): 拿计算器
(2): px to rem插件
(3): 工程化(yarn管理包, webpack分析编译代码-集成功能)
webpack+postcss+postcss-pxtorem
打包时, 帮我把所有style里(标签里的它不管)px单位, 转成rem单位

步骤:
1. 下载postcss postcss-pxtorem@5.1.1 amfe-flexible
2. postcss.config.js -> 填入文档的配置
3. main.js 引入flexible.js
*/

/*
目标: 登录页面-路由
1. views/Login/index.vue - 给框
2. 配置到router/index.js里
3. App.vue - router-view挂载点
*/

/*
目标: 头部导航
1. 明确需求, 复制组件过来, 剔除无用的
2. 再修改, 改标题内容, 改背景颜色, 字体颜色
3. 查文档 -> 定制样式
4. babel.config.js里配置
5. vue.config.js里配置cover.less文件的绝对地址
*/

/*
标: 登录表单-铺设-校验
1. 找到表单van-form整体复制过来
2. 查看属性意思, 相应修改
3. 寻找红色前星星, required属性
4. v-model绑定form对象属性和输入框值
5. field-里rules设置校验规则
*/

/*
目标: 登录功能-拿到数据
vant组件不同于element-ui, vant组件的van-form遇到提交时, 会自己检验每个表单里的规则, 不通过, 就不执行submit事件的方法
可以用this.form / values 都是参数名和值
*/

/* 目标: 登录接口调用
1. api里, 看接口, 编写接口方法
2. 在Login/index.vue中, 引入, 在submit函数中使用, 传入收集到的form对象里参数名和值
3. 之后, 拿到token.js工具, 直接把token存入本地(不用存vuex里)
4. Notify通知, 给用户反馈, vant组件(有的可以用函数形式调用, 有的也可以用组件形式来调用, 具体要看文档) */

/*
目标: (优化)防止用户频繁点击按钮
1. 按钮身上, 禁用属性, 网络请求开始, 开启禁用, 请求成功/失败, 关闭禁用
2. 同时, 加载状态提示用户 loading, loading-text
*/

/*
目标: 底部导航
前提: 把二级路由提前创建和配置好了router/index.js规则-留好router-view二级挂载点
1. van-tabbar标签, 复制, 删除, 修改
2. 集成它自带的route路由功能
*/

/*
目标: 底部导航
前提: 把二级路由提前创建和配置好了router/index.js规则-留好router-view二级挂载点
1. van-tabbar标签, 复制, 删除, 修改
2. 集成它自带的route路由功能
*/

/*
目标: 头部导航
1. 自定义左侧和右侧标题内容插槽技术
注意: icon要先去main.js注册才能使用
2. 定制了nav-bar-icon-color的less变量(cover.less)
*/

/*
目标: 标签栏铺设+动画
1. 查找文档, 找类似的 (重要: 先从基础开始用)
2. 修改+增加
*/

/*
目标: 频道数据铺设
1. 接口文档-频道数据
2. api/index.js接口方法
3. 引入Home/index.vue -> created里发请求
4. 把数据循环van-tab标签
5. cover.less, 下面小线段颜色
*/

/*
目标: 文章列表的组件封装
核心: Home/index.vue > ArticleList.vue > ArticleItem.vue
1. 一行文章信息, van-cell单元格(直接从.md复制)
2. ArticleList里循环使用
3. van-tab组件内, 分别对应
重要: van-tab每个都对应一次article-list(多个被创建了互相独立)
*/

/*
目标: tab标签导航-粘性布局
原因: 网页有竖向滚动条, tab标签栏推上去, 需求是让他一直在
解决: position: sticky; tab有sticky属性
扩展: 粘性布局, 默认随着网页滚动, 只有到了临近值类似固定定位
css单位小数点: 保留6-8位小数位
*/

/*
目标: 文章列表铺设
1. 找到接口, 写api/index.js->接口方法
2. ArticleList引入, 发起文章列表请求拿到数据
3. v-for遍历article-item, 传入数据对象展示数据
引入子组件ArticleItem.vue
*/

/*
目标: tab标签导航-切换对应文章数据
1. van-tab设置name属性=值为频道ID (van-tabs身上v-model绑定name属性值)
2. active频道ID传入ArtileList.vue中, 换频道数据
*/

/*
目标: 文章Item里图片铺设
思路: 先单图, 再多图
1. 先写标签, 写在哪里?, 把数据弄进去
2. v-if="artObj.cover.type === 1" 就让单图出现 >1, 就让多图的容器出现
3. 多图, v-for循环一个img标签显示即可
*/

/*
目标: 日期插件(库)的dayjs的使用
1. 找到官网
2. 引入到工程内
3. 查文档找到自己想要的功能, 尝试使用
4. 定义formatDate方法, 接收要被转换的日期字符串, 转换后返回到标签内显示
*/

/*
组件套路
1. 找到类似的, 复制过来, 使用运行看效果
2. 删除无用的
3. 修改(读属性/直接改文字/标签数量)
4. 其他....
*/

/*
目标: 底部加载更多组件 (van-list)
重要1: 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
重要2: finished: 加载完成，加载完成后不再触发load事件
重要3: 初始化的时候, 就判定是否触底(数据是网络请求回来的-异步, 默认触发load一次)
重要4: 数据加载完毕, loading: false(保证下次触底还能执行load事件)
注意：
  和tabs配合使用van-list小问题:
  复现: 前一页, 往下滚动, 然后再切换到别的频道, 会导致van-list上来又触发@load事件
  原因: :immediate-check无法阻止滚动事件的监听效果
  前一页, 网页滚动条滚动下边去了, tab下一页没有那么高(默认上来数据没回来, 没有滚动条的)
  滚动条从下边, 自己又滚动回来了
*/

/*
目标: 触底, 在发请求, 拿到下一页数据
1. 接口文档: 发现需要传递timestamp时间戳
下一页数据需要传递上一次接口返回的pre_timestamp的时间值
2. data函数里nextTime, 专门用于保存紧挨着的上一次的pre_timestamp的值
3. onLoad触底加载更多事件方法中, 把nextTime传入API接口方法内
4. 修改api/index.js相应接口, 接收timestamp值(不能固定的)
*/

/*
目标: 解决默认触发2次的bug, 解决加载更多数据
1. list组件immediate-check:false (关闭立即检查)
2. onLoad方法里, 要把新的数据和原数据, 进行合并(数据更多)
3. 异步加载完毕以后loading:false (保证下次触底还能执行load事件)
4. 判断没有更多数据了, finished: true(加载完成)
*/

/*
目标: 下拉刷新(顶部刷新)
js原生实现:
移动端特有事件名: touchstart touchmove touchend
获取手指在屏幕的坐标点, 移动后, 手指坐标点, 手指离开屏幕触发touchend
获取到手指偏移量, 修改标签的位移量 (加c3过渡动画)
采用PullRefresh的组件
1. 找到包在van-list组件外面
2. 把变量和方法定义好
3. 刷新方法里, 清空数组, 把nextTime=new Date(), 重新请求一次新的数据
4. refreshing的状态: false
*/

/*
目标: 一级反馈面板铺设
1. ActionSheet组件, 放到Home/index.vue
如果放在ArticleItem和ArticleList里, 此组件都会创建多次
整个首页公用一个反馈标签即可
*/

/*
目标: 一级反馈面板显示
1. vuex里定义state变量控制反馈面板显示/隐藏
2. ArticleItem.vue中, x的点击事件上
触发mutations, 修改state里, 影响sheet组件显示/隐藏
3. actions和二级反馈的数据, 提到公共的vuex里定义(固定的数据应该在统一的地方统一修改, 你就不用在找逻辑页面了)
*/

/*
目标：首页-反馈-举报文章请求方法，完成举报接口的调用
1. 跟着接口文档定义请求方法
2. 在逻辑页面引入之后，在点击选项的时候调用反馈举报文章的方法并传入所需要的参数
3. 举报成功后，await后面的代码才能被方形往下执行（执行完await中的代码拿到成功结果后）
4. 关闭弹窗，延迟500ms把数据源切回去
*/

/*
目标：响应拦截器
1. 加入axios的拦截器-找文档
2. 当响应码是4xx、5xx开头的：判断状态码为401，给身份认证过期提示、移除封装的removeToken()、切换路由路径到登录页
小bug修复：跳转到登录页的时候底部反馈面板没有被关闭，因此使用destroyed() {
  销毁未关闭的底部反馈面板，即给状态改成false让其关闭
}
*/

/*
目标：请求拦截器
  // 发起请求的时候自动带上请求头--给配置对象config加上headers字段，这个字段的属性值就是登录保存的token值
  config.headers.Authorization = `Bearer ${getToken()}`
*/
</script>

<style>

</style>
